<template>
<div>
  <div class = "text1">
  </div>
<div class="table">
    我的收藏
   <el-table
    :data="list"
    border
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="专利类型" style="width:400px">
            <span>{{ props.row.application_num }}</span>
          </el-form-item>
          <el-form-item label="专利类型" style="width:900px">
            <span>{{ props.row.applicant }}</span>
          </el-form-item>
          <el-form-item label="专利类型" style="width: 400px">
            <span>{{ props.row.title }}</span>
          </el-form-item>
          <el-form-item label="专利类型" style="width: 900px">
            <span>{{ props.row.patent_type }}</span>
          </el-form-item>
          <el-form-item label="发明人" style="width: 100%">
            <span>{{ props.row.inventor }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      prop="createdDate"
      label="收藏日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="application_num"
      label="专利申请号"
      width="240">
    </el-table-column>
    <el-table-column
      prop="applicant"
      label="申请人/公司"
      width="300">
    </el-table-column>
    <el-table-column
      prop="title"
      label="专利名"
      width="700">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="查看"
      width="150">
      <template slot-scope="scope">
            <router-link :to="'/patent/detail/' + scope.row.application_num">
              <el-button type="primary" size="big" icon="el-icon-circle-plus">查看</el-button>
            </router-link>
      </template>
    </el-table-column>
    <el-table-column
      prop="state"
      fixed="right"
      label="收藏"
      width="180">
      <template slot-scope="scope">
        <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="收藏"
                inactive-text="未收藏"
                @change="changeCollect(scope.row.state,scope.row.application_num)">
              </el-switch>
      </template>
    </el-table-column>
  </el-table>
</div>
</div>
</template>

<script>
import collect from '@/api/chapter/collect'

  export default {
    data() {
      return {
        listLoading: false,
        list: null, //查询之后接口返回集合
        page: 1, //当前页
        limit: 10, //每页显示的记录数
        total: 100, //总记录数
        patentsTotal: 228179, //数据库中的专利总数
        sizer: {},
        year: [],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    },
    created(){
      this.getPatentCollectList(this.page,this.limit);
    },
    methods: {
      changeCollect(collectState,patentNum){         
      console.log(collectState)                                                                               
      //绑定的是更改之后的状态
      if(collectState == true){//由未收藏转换为收藏，调用收藏函数
        collect.collectPatent(patentNum).then((res) =>{
          if(res.data.state == true){
            this.collectState = true
            this.$message({
              message:'收藏成功!',
              type:'success'
            })
          }
        })
      }

      if(collectState == false){
        collect.deleteCollectPatent(patentNum).then((res) =>{
          if(res.data.state == "cancel"){
            this.collectState = false
            this.$message({
              message:'取消收藏成功!',
            })
          }
        })
      }
    },
      getPatentCollectList(page,limit){
        collect.getPatentCollectList(page,limit).then((res)=>{
          this.total = res.data.total;
          this.list = res.data.items;
          console.log(this.list)
        })
      }
    },

    
  }
</script>
<style>
.table{
  width: 1700px;
  margin:0 auto;
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 400px;
}
</style>